
import { Menu, Dropdown, Badge, Empty } from 'antd';
import { BarsOutlined, MoreOutlined, FilterOutlined } from '@ant-design/icons'
import styles from './style.less'
import classNames from 'classnames';


const ActionDropdown = (props) => {

    const {
        arrow,
        className,
        handleVisibleChange,
        placement = "bottomCenter",
        trigger,
        title,
        icon,
        actions = [],
        status = "default",
        iconClassName,
        actionItemClassName,
        style
    } = props

    const menuItemClassName = classNames(actionItemClassName)

    const menu = (actions && actions.length > 0) ? (<Menu>
        {actions.map((item, index) => {
            return <Menu.Item className={menuItemClassName} key={`menu-${index}`}>
                {item}
            </Menu.Item>
        })}
    </Menu>) : "无操作"

    const renderIcon = () => {
        if (icon) {
            if (icon === 'more') {
                return <MoreOutlined />
            }
        }
        return <BarsOutlined />
    }

    let badgeProps = {
    }
    if (status === "filter") {
        // badgeProps.color = "#1890ff";
        // badgeProps.dot = true;
        badgeProps.count = <FilterOutlined className={styles.filter} />
    }
    const realClassNames = classNames(className)
    const iconClass = classNames(styles.moreIcon,iconClassName)
    return <Dropdown
        className={realClassNames}
        overlay={menu}
        arrow={arrow}
        placement={placement}
        trigger={trigger}
        overlayClassName={styles.actionItem}
        onVisibleChange={handleVisibleChange}
    >
        <Badge {...badgeProps}>
            {title || <div className={iconClass}>{renderIcon()}</div>}
        </Badge>
    </Dropdown >
}

export default ActionDropdown;